<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<!-- For Resposive Device -->
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<!-- For IE -->
	<meta http-equiv="X-UA-Compatible" content="IE=edge">

	<title>ChinaZ</title>

	<link rel="stylesheet" href="./css/title.css">
	<link rel="stylesheet" href="css/style1.css">
	<link rel="stylesheet" href="css/responsive.css">

	<!-- m的样式引入 -->
	<link href="css/111.css" rel="stylesheet" type="text/css" />
	<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
	<script src="js/bootstrap.min.js"></script>
	<script src="js/jsrender.js"></script>
	<script src="js/jsrender.min.js"></script>
	<script src="js/jquery-3.2.1.min.js" type="text/javascript"></script>
	<style>
		.city-picker-span {
			width: 300px;
		}

		.modal-row {
			margin-top: 30px;
		}
	</style>

</head>

<body>

	<div class="main-page-wrapper">

		<!-- =====导航栏开始 ======= -->
		<div class="navbar navbar-fixed-top custom-navbar" role="navigation">
			<div class="container">

				<!-- navbar header -->
				<div class="navbar-header">

					<a href="#" class="navbar-brand">宠爱有家</a>
				</div>

				<div class="collapse navbar-collapse">

					<ul class="nav navbar-nav navbar-right">
						<li><a href="../index/index.html" class="smoothScroll">首页</a></li>
						<li><a href="../领养展示页面/about.html" class="smoothScroll">领养</a></li>
						<li><a href="../宠物店展示/宠物店展示.html" class="smoothScroll">寄养</a></li>
						<li><a href="../index/上架.html" class="smoothScroll">为小可爱找主人</a></li>
						<li><a href="../领养展示页面/about.html" class="smoothScroll">购买宠物</a></li>
						<li><a href="../index/博客.html" class="smoothScroll">社区</a></li>
						<li><a href="../个人端页面/账号管理.html" class="smoothScroll">个人中心</a></li>
						<li><a href="../联系我们/lxwm.html" class="smoothScroll">联系我们</a></li>
					</ul>

				</div>

			</div>
		</div>

		<section id="intro" class="parallax-section">
			<div class="container">
				<div class="row">

					<div class="col-md-12 col-sm-12">
						<h3 class="wow bounceIn" style="color: aliceblue" data-wow-delay="0.9s">背景标题</h3>
						<h1 class="wow fadeInUp" style="color: aliceblue" data-wow-delay="1.6s">宠爱有家</h1>
					</div>


				</div>
			</div>
		</section>

		<section class="banner-bottom-section">
			<div class="container-fluid">
				<div class="row messagebox">
					<div class="col-md-2 col-xs-3">
						<div class="messageleft">
							<ul class="Fstage">
								<li><a href="#"><em class="e1"></em>个人中心<div class="clear"></div></a>
									<ul class="Tstage">
										<li><a href="账号管理.html">账号管理</a></li>
										<li><a href="物流详情.html">物流详情</a></li>
										<li><a href="历史订单.html">历史订单</a></li>
									</ul>
								</li>
							</ul>
						</div>
					</div>
					<div class="col-md-10 col-xs-9">
						<div class="messageright">
							<div class="formpage">
								<div class="clear" style="height:20px"></div>
								<h2>物流单号信息
									<a class="greenbtn add" onclick="callback()" href="#">新增</a>
								</h2>
								<div class="clear" style="height:30px"></div>
								<span class="information">
									<div class="clear" style="height:10px"></div>

									<form class="datable">
										<table width="100%" border="1" cellpadding="0" cellspacing="0">
											<thead>
												<tr>
													<th width="30%">订单编号</th>
													<th width="10%">买家姓名</th>
													<th width="10%">实付款</th>
													<th width="10%">下单时间</th>
													<th width="10%">收货时间</th>
													<th width="20%">联系方式</th>
													<th width="10%">操作</th>
												</tr>
											</thead>
											<tbody id="lishi-list">
												<td>12312</td>
												<td>12312</td>
												<td>12312</td>
												<td>12312</td>
												<td>12312</td>
												<td>12312</td>
												<td>12312</td>

											</tbody>
										</table>
									</form>
									<div class="clear"></div>
								</span>
								<div class="clear" style="height:50px"></div>
							</div>
						</div>
					</div>
					<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
						<div class="modal-dialog" role="document">
							<div class="modal-content">
								<div class="modal-header">
									<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
											aria-hidden="true">&times;</span></button>
									<h4 class="modal-title" id="myModalLabel"><text>物流信息修改</text></h4>
									<input type="hidden" id="order-id" value="">
								</div>
								<div class="modal-body">
									<div class="row modal-row">
										<div class="col-md-6">
											<label for="orderID">订单编号(不可修改)</label>
											<div class="input-group">

												<input type="text" class="form-control" value="" disabled id="orderID">
											</div>
										</div>
										<div class="col-md-6">
											<label for="buyers-name">买家姓名(不可修改)</label>
											<div class="input-group">
												<input type="text" class="form-control" value="" disabled
													id="buyers-name">
											</div>
										</div>
									</div>
									<div class="row modal-row">
										<div class="col-md-6">
											<label for="payment">实付款(￥)</label>
											<div class="input-group">

												<input type="text" class="form-control" value="" disabled id="payment">
											</div>
										</div>
										<div class="col-md-6">
											<label for="date">下单时间</label>
											<div class="input-group">
												<input type="text" class="form-control" value="" disabled id="date">
											</div>
										</div>
									</div>
									<div class="row modal-row">
										<div class="col-md-6">
											<label for="end-date">收货时间</label>
											<div class="input-group">

												<input type="text" class="form-control" value="" disabled id="end-date">
											</div>
										</div>
										<div class="col-md-6">
											<label for="buyers-tel">联系方式(不可修改)</label>
											<div class="input-group">

												<input type="text" class="form-control" value="" disabled
													id="buyers-tel">
											</div>
										</div>
									</div>
								</div>
								<div class="modal-footer">
									<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</section>
	</div>

	<footer>
		<div class="container">
			<div class="top-footer row">
				<div class="col-md-5 col-sm-7 col-xs-12 footer-logo">
					<a href="#"><img src="images/them-logo/them-main-logo-2.jpg" alt="Logo"></a>
					<p><span class="p-color">myPet</span> was established in 2017 by Pet business veterans, Rod
						Davies and Matthew Levington, the journey began when founders Matthew Levington and Rod
						Davies, met up in 2017 over a beer</p>
					<ul class="icon">
						<li><a href="" class="tran3s"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
						<li><a href="" class="tran3s"><i class="fa fa-linkedin" aria-hidden="true"></i></a></li>
						<li><a href="" class="tran3s"><i class="fa fa-dribbble" aria-hidden="true"></i></a></li>
						<li><a href="" class="tran3s"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
					</ul>

					<ul class="policy">
						<li><a href="" class="tran3s">Privacy Policy </a></li>
						<li><a>|</a></li>
						<li><a href="" class="tran3s">Legal Policy</a></li>
					</ul>
				</div> <!-- /.footer-logo -->

				<div class="col-md-4 col-sm-5 col-xs-12 footer-list">
					<h5>Important Links</h5>

					<ul>
						<li><a href="#" class="tran3s">首页</a></li>
						<li><a href="#" class="tran3s">关于我们 </a></li>
						<li><a href="#" class="tran3s">寄养</a></li>
						<li><a href="shop.html" class="tran3s">领养</a></li>
						<li><a href="#" class="tran3s">出售</a></li>
						<li><a href="#" class="tran3s">新闻</a></li>
						<li><a href="#" class="tran3s">社区</a></li>
					</ul>
					<ul>
						<li><a href="#" class="tran3s">宠物</a></li>
						<li><a href="#" class="tran3s">我们的历史</a></li>
						<li><a href="#" class="tran3s">我们做了什么</a></li>

					</ul>
				</div> <!-- /.footer-list -->

				<div class="col-md-3 col-xs-12 footer-news">
					<h5>News Update</h5>

					<ul>
						<li>
							<h6><a href="#" class="tran3s">Prefinished Solid Hardwood Flooring</a></h6>
							<span>january 02,2017</span>
						</li>
						<li>
							<h6><a href="#" class="tran3s">Latst pet care in summer 12 care them well</a></h6>
							<span>january 02,2017</span>
						</li>
					</ul>
				</div> <!-- /.footer-news -->
			</div> <!-- /.top-footer -->
		</div> <!-- /.container -->

		<div class="bottom-footer">
			<div class="container">
				<p class="float-left">Copyright &copy; 2017.Company name All rights reserved.<a target="_blank"
						href="http://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></p>
				<form action="#" class="float-right">
					<input type="text" placeholder="Your Email">
					<button class="tran3s p-bg-color">Subscribe</button>
				</form>
			</div> <!-- /.container -->
		</div> <!-- /.bottom-footer -->
	</footer>

	</div> <!-- /.main-page-wrapper -->


	<!-- Scroll Top Button -->
	<button class="scroll-top tran7s p-color-bg">
		<i class="fa fa-angle-up" aria-hidden="true"></i>
	</button>

	<!-- pre loader  -->
	<div id="loader-wrapper">
		<div id="loader"></div>
	</div>



	<!-- js file -->
	<!-- Main js file/jquery -->
	<script src="vendor/jquery-2.2.3.min.js"></script>
	<!-- bootstrap-select.min.js -->
	<script src="vendor/bootstrap-select-1.10.0/dist/js/bootstrap-select.min.js"></script>
	<!-- bootstrap js -->
	<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
	<!-- camera js -->
	<script src="vendor/Camera-master/scripts/camera.min.js"></script>
	<script src="vendor/Camera-master/scripts/jquery.easing.1.3.js"></script>
	<!-- Owl carousel -->
	<script src="vendor/OwlCarousel2/dist/owl.carousel.min.js"></script>
	<!-- appear & countTo -->
	<script src="vendor/jquery.appear.js"></script>
	<script src="vendor/jquery.countTo.js"></script>
	<!-- fancybox -->
	<script src="vendor/fancybox/dist/jquery.fancybox.min.js"></script>
	<!-- Gallery - isotop -->
	<script type="text/javascript" src="vendor/isotope.pkgd.min.js"></script>
	<!-- WOW js -->
	<script type="text/javascript" src="vendor/WOW-master/dist/wow.min.js"></script>
	<!-- Circle Progress -->
	<script type="text/javascript" src="vendor/circle-progress.js"></script>
	<!-- Style js -->
	<script src="./js/title.js"></script>
	<script src="js/custom.js"></script>


</body>

</html>
<script id="testTmpl" type="text/x-jsrender">
	<tr>
		<td>订单号:{{:orderID}} </td>
		<td>{{:buyers}}</td>
		<td>￥{{:payment}}</td>
		<td>{{:date}}</td>
		<td>{{:end_date}}</td>
		<td>{{:tel}}</td>
		<td><a class="dolink" onclick="editOrder({{:id}})" href="#">修改</a></td>
	</tr>
	</script>

<script>

	var data = [{
		id: 1001,
		orderID: '6265506578268338',
		buyers: '张三',
		payment: '1760',
		status: '待收货',
		date: '2019-09-25',
		end_date: '',
		tel: '137****6785',
	}, {
		id: 1002,
		orderID: '6265506578268337',
		buyers: '李四',
		price: '456',
		quantity: 1,
		payment: '456',
		status: '交易成功',
		date: '2019-09-15',
		end_date: '2019-09-20',
		tel: '131****4679',

	}, {
		id: 1003,
		orderID: '6265506578268333',
		buyers: '王二',
		price: '128',
		quantity: 10,
		payment: '1280',
		status: '交易成功',
		date: '2019-08-25',
		end_date: '2019-08-29',
		tel: '158****6527',

	}, {
		id: 1004,
		orderID: '6265506578268331',
		buyers: '周五',
		price: '99.99',
		quantity: 1,
		payment: '99.99',
		status: '交易取消',
		date: '2019-08-01',
		end_date: '',
		tel: '176****1996',

	}];
	var html = $("#testTmpl").render(data);
	$("#lishi-list").append(html);

	function callback() {

		$('body').append('<div id="mask"></div>');
		$('#mask').fadeIn();
		$('.popbox').css('display', 'block');
	}

	function editOrder(e) {
		for (var i = 0; i < data.length; i++) {
			if (e == data[i].id) {
				$('#myModal').modal('show');
				$('#orderID').val(data[i].orderID);
				$('#buyers-name').val(data[i].buyers);
				$('#buyers-tel').val(data[i].tel);
				$('#end-date').val(data[i].end_date);
				$('#payment').val(data[i].payment);
				$('#date').val(data[i].date);
			}
		}
	}


</script>